<template>
  <view class="box">
    <uni-search-bar
      class="uni-mt-10"
      radius="100"
      placeholder="搜索车牌号、费用类型"
      clearButton="none"
      cancelButton="none"
      @confirm="search"
    >
    </uni-search-bar>
    <view v-for="(item, index) in list" :key="index" class="contain">
      <navigator url="" hover-class="none">
        <view class="apply_zhong">
          <text>{{ filterCarId(item.carId) }} {{ item.createDate }}费用 </text>
          <text style="color: #b2aaaa; font-size: 12px">{{
            item.createDate
          }}</text>
        </view>
        <view class="apply_bottom"> </view>
        <view class="apply_xia">
          <view class="apply_xia_left">
            <view>车辆保管费：{{ item.storageFee }}/元</view>
            <view>保险费：{{ item.premium }}/元</view>
            <view>车船税：{{ item.vehicleTax }}/元</view>
            <view>汽油费：{{ item.gasCharge }}/元</view>
            <view>维修费： {{ item.maintenanceCost }}/元</view>
            <view>过桥费： {{ item.bridgeToll }}/元</view>
            <view>年审费： {{ item.reviewFee }}/元 </view>
          </view>
          <view class="apply_xia_right">
            <uni-icons
              @click="edit(item)"
              style="margin: 30px"
              type="compose"
              size="30"
            ></uni-icons>
            <uni-icons
              @click="del(item)"
              style="margin: 30px；font-size:50px"
              type="trash"
              size="30"
            ></uni-icons>
          </view>
        </view>
        <view style="text-align: right; height: 40px; padding-right: 10%"
          >总计：{{ item.feeSum }}/元
        </view>
      </navigator>
    </view>
    <view style="height: 80px"></view>
    <navigator
      url="/pages/vehiclefees/add"
      open-type="navigate"
      hover-class="navigator-hover"
    >
      <view class="below">
        <u-button type="primary" text="新增车辆费用"></u-button>
      </view>
    </navigator>
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog
        cancelText="取消"
        confirmText="确定"
        title="删除确认"
        content="确定要删除该车辆费用吗？"
        @confirm="dialogConfirm"
        @close="dialogClose"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import {
  list,
  carInfo,
  getDetail,
  remove,
  add,
  update,
} from "@/api/vehiclefees";
export default {
  name: "",

  data() {
    return {
      list: [],
      carInfo: [],
      row: {},
    };
  },

  async onShow() {
    const { data } = await carInfo();
    this.carInfo = data?.records;
    this.getList();
  },

  mounted() {},

  methods: {
    async getList() {
      const res = await list();
      this.list = res.data.records;
    },
    filterCarId(val) {
      return this.carInfo.find((item) => item.id === val)?.carNumber;
    },
    search(value) {},
    edit(item) {
      uni.navigateTo({
        url: `/pages/vehiclefees/edit?row=${JSON.stringify(item)}`,
      });
    },
    del(item) {
      this.row = item;
      this.$refs.alertDialog.open();
    },
    async dialogConfirm() {
      await remove(this.row.id);
      this.getList();
      uni.showToast({
        title: "删除成功",
        duration: 1500,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  min-height: 100vh;
  position: relative;
  background-color: #f2f2f2;
}
.uni-mt-10 {
  background-color: #fff;
}
.contain {
  background-color: #fff;
  margin: 10px 0;
}
.apply_zhong {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  font-size: 17px;
  font-weight: 700;
}
.apply_xia {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  .apply_xia_left {
  }
  .apply_xia_right {
    line-height: 117px;
  }
}
.apply_bottom {
  font-size: 14px;
  border-bottom: 1px solid #dddddd;
  .cxedit {
    text-align: right;
    background-color: #169bd5;
    border-radius: 5px;
    color: #fff;
    padding: 10px 0;
    margin-left: 80%;
  }
}
.below {
  width: 90%;
  position: absolute;
  left: 5%;
  bottom: 20px;
}
</style>